import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("流式布局"), // 标题
          leading: Icon(Icons.menu), // 左侧图标
          actions: [Icon(Icons.settings)],  // 右侧图标数组
          elevation: 0.0,// 去掉阴影
          centerTitle: true, // 标题居中

        ),
        body:WrapDemo()
    );
  }
}

class WrapDemo extends StatelessWidget {
  // 遍历的方式
  List<String> _list = [
    '曹操','司马懿','曹仁','曹洪','张辽','许诸'
  ];
  List<Widget> _weiGou(){
    return _list.map((item) => Chip(
        label: Text(item),
        avatar: CircleAvatar(
          backgroundColor: Colors.pink,
          child: Text('魏'),
        ),
    )).toList();
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      // 内容溢出情况
      children: [
        Wrap(
          children: _weiGou(),
          spacing: 18.0, // 水平方向间距
          runSpacing: 20, // 垂直方向的间距
          alignment: WrapAlignment.spaceAround, // 主轴方向的对齐方式
        ),
        Wrap(
          children: [
            Chip(
              label: Text("刘备"),
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),

            ),
            Chip(
              label: Text("诸葛亮"),
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),

            ),
            Chip(
              label: Text("赵云"),
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),

            ),
            Chip(
              label: Text("关羽"),
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),

            ),
            Chip(
              label: Text("张飞"),
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),

            ),
          ],
        )
      ],
    );
  }
}
